CSS - Flexbox

為 Interview Bit 的第 22 題。

Flexbox 網路上的教學非常多，可見真的非常強大及好用。

這一篇主要是專有名詞的介紹。

Flexbox 元素

在開始使用 Flexbox 之前，首先必須知道一些專有名詞。

• flex container
• flex item
• main axis
• cross axis
• main start
• main end
• cross start
• cross end

CodePen 範例

可以看到上面的圖片紫色區域叫做 flex container，中文為外容器，裡面有三個淺藍色 flex items，中文為內容器。

main axis | cross axis

flex container 存在兩個虛擬的軸：main axis 和 cross axis，flex items 預設沿著 main axis 排列。

那麼 main axis 是垂直線還是水平線，這一點需要透過 flex-direction 做判斷，如果 flex-diection: row，表示 main axis 為水平線，cross axis 是和 main axis 垂直的線，表示 cross axis 為垂直線。

如果 flex-diection: column，表示 main axis 為垂直線，cross axis 是和 main axis 垂直的線，表示 cross axis 為水平線。

flex-direction: row，可以看到 main axis 為水平線。

flex-direction: column，可以看到 main axis 為垂直線。

main-start | main-end

main-start：main axis 的起點
main-end：main axis 的終點

cross-start | cross-end

cross-start：cross axis 的起點
cross-end：cross axis 的終點

參考資料：
Basic concepts of flexbox
圖解：CSS Flex 屬性一點也不難
CSS Flexbox
css-tricks - A Complete Guide to Flexbox